<template>
	<div class="home col-f">
		<div class="title text-center">
			<div class="container">
				<img src="~/static/img/home/syicon_biaoti_tanwallet.png"/>
				<h3 class="col-f mt10">TAN-Wallet</h3>
				<div class="title-line"></div>
				<div class="sanjiao"></div>
				<div>COMING SOON 8月</div>
			</div>
		</div>
		<div class="txt">
			<div class="container text-center">
				<ul>
					<li>
						<div class="box">
							<div class="box-b">
								<div class="img-box img-box1">
								</div>
						    </div>
						</div>
						<p>Windows</p>
					</li>
					<li>
						<div class="box">
							<div class="box-b">
								<div class="img-box img-box2">
								</div>
						    </div>
						</div>
						<p>Mac OS x</p>
					</li>
					<li>
						<div class="box">
							<div class="box-b">
								<div class="img-box img-box3">
								</div>
						    </div>
						</div>
						<p>Linx</p>
					</li>
					<li>
						<div class="box">
							<div class="box-b">
								<div class="img-box img-box4">
								</div>
							</div>
						</div>
						<p>Android</p>
					</li>
					<li class="text-center">
						<div class="box">
							<div class="box-b">
								<div class="img-box img-box5">
								</div>
							</div>
						</div>
						<p>ios</p>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>	
		</div>
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.home{position: relative;background: url(../../static/img/bg/pic_sy_ditu03.png)0 0 no-repeat;background-size: 100% 100%;padding-top: 100px;}
	
	.txt ul{margin: 200px auto;}
	.txt ul li{float: left;width: 20%;text-align: center;list-style: none;}
	.txt ul li img{}
	.txt ul li p{margin-top: 10px;}
	.box{width:116px;height:116px;border-radius: 50%;border: 2px solid #5c5a73;margin: auto;}
	.box-b{width:100px;height:100px;background: #5c5a73;border-radius: 50%;margin: auto;margin-top: 6px;}
	.img-box{width:100px;height:100px;margin: auto;}
	.img-box1{background: url('~/static/img/home/icon_tanwallet_windows_wxz.png')20px 20px no-repeat;background-size:60px 60px ;}
	.img-box2{background: url('~/static/img/home/icon_tanwallet_Mac OS x_wxz.png')20px 20px no-repeat;background-size:60px 60px ;}
	.img-box3{background: url('~/static/img/home/icon_tanwallet_Linux_wxz.png')20px 20px no-repeat;background-size:60px 60px ;}
	.img-box4{background: url('~/static/img/home/icon_tanwallet_Android_wxz.png')20px 20px no-repeat;background-size:60px 60px ;}
	.img-box5{background: url('~/static/img/home/icon_tanwallet_iOS_wxz.png')20px 20px no-repeat;background-size:60px 60px ;}
	
	
	li:hover .box{border: 2px solid #fff;color: #5c5a73;cursor: pointer;}
	li:hover .box-b{background: #fff;}
	li:hover .img-box1{background: url('~/static/img/home/icon_tanwallet_windows_xz.png')20px 20px no-repeat;background-size:60px 60px ;}
	li:hover .img-box2{background: url('~/static/img/home/icon_tanwallet_Mac OS x_xz.png')20px 20px no-repeat;background-size:60px 60px ;}
	li:hover .img-box3{background: url('~/static/img/home/icon_tanwallet_Linux_xz.png')20px 20px no-repeat;background-size:60px 60px ;}
	li:hover .img-box4{background: url('~/static/img/home/icon_tanwallet_Android_xz.png')20px 20px no-repeat;background-size:60px 60px ;}
	li:hover .img-box5{background: url('~/static/img/home/icon_tanwallet_iOS_xz.png')20px 20px no-repeat;background-size:60px 60px ;}
</style>